<template>
  <div class="home">
    <!-- 左侧菜单栏 -->
    <div class="left_menu">
      <!-- 退出登录按钮 -->
      <div class="logoutbtn"
           @click="logOut">退出登录</div>
      <div class="left_box">
        <!-- 大标题 -->
        <div class="title">诚德口罩</div>
        <div class="descrip_box">
          <div class="little_title">设备代号：</div>
          <div class="little_content">{{getMachineName}}</div>
        </div>
        <div class="descrip_box">
          <div class="little_title">操作员工：</div>
          <div class="little_content">{{getUsername}}</div>
        </div>
        <div class="descrip_box">
          <div class="little_title">当前时间：</div>
          <div class="little_content timeDisc">{{nowTime}}</div>
        </div>
      </div>
      <!-- 当前产量 -->
      <div class="totalYield">
        <totalyieldbox></totalyieldbox>
      </div>
      <!-- 设备状态 -->
      <div class="machineState">
        <machinebox></machinebox>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div class="right_content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import updateTime from '@/utils/accesstime.js'
import machinebox from '@/components/littlemachine'
import totalyieldbox from '@/components/totalyield'

export default {
  name: 'home',
  components: {
    machinebox,
    totalyieldbox
  },
  mounted() {
    // 刷新时间
    updateTime.call(this)
  },
  data() {
    return {
      nowTime: '',
      time1: ''
    }
  },
  methods: {
    // 退出登录按钮
    logOut() {
      // 再次确认
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
        // 跳转
        this.$router.push('/login')
      })
    }
  },
  computed: {
    getUsername() {
      if (!$cookies.get('totalInfo')) {
        return '无法显示,请重新登录'
      }
      return this.$cookies.get('totalInfo').UserInfo.UserName
    },
    getMachineName() {
      if (!$cookies.get('totalInfo')) {
        return '无法显示,请重新登录'
      }
      return this.$cookies.get('totalInfo').selectedMacInfo.MachineName
    }
  }
}
</script>

<style lang="less" scoped>
@import './home.less';
</style>
